<template>
  <div class="wty-anim2">
    <button @click="show = !show">动画</button>
    <transition @beforeEnter="beforeEnter" @enter="enter" @leave="leave">
      <p v-show="show">hello</p>
    </transition>
  </div>
</template>

<script>
import Velocity from "velocity-animate";
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.fontSize = "30px";
    },
    enter(el, done) {
      Velocity(
        el,
        { opacity: 1, "font-size": "50px" },
        { duration: 1000 },
        { complete: done }
      );
    },
    leave(el, done) {
      Velocity(
        el,
        { opacity: 0.5, "font-size": "30px" },
        { duration: 1000 },
        { complete: done }
      );
    }
  }
};
</script>

<style>
p {
  opacity: 0;
  font-size: 30px;
}
</style>
